<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 0;
        }

        h1 {
            color: #ff7a7a;
            font-size: 20px;
            border-bottom: 1px solid #dadada;
            margin: 20px 10px 8px 10px;
        }

        h2 {
            font-size: 18px;
            color: #ff7a7a;
            margin: 0;
        }

        a {
            text-decoration: none;
            font-size: 15px;
            color: #fff;
        }

        p {
            margin-top: 10px;
            font: 14px/14px "微软雅黑";
        }

        ul {
            list-style: none;
        }

        li {
            display: inline-block;
            padding-left: 18px;
            font: 16px/16px "微软雅黑";
            padding-bottom: 10px;
            padding-right: 10px;
        }

        .menu:hover {
            background: #fff;
            color: #000;
            border: 1px solid #dadada;
        }

        #main {
            width: 410px;
            height: 580px;
        }

        .column {
            width: 390px;
            margin: 10px 14px 18px 12px;
        }

        .menu {
            width: 92px;
            height: 33px;
            line-height: 33px;
            display: inline-block;
            background: #ff7a7a;
            text-align: center;

        }

        .menu_margin {
            margin-right: 4px;
        }

        .menu_magrin_left {
            margin-left: 2px;
        }

        #hot_img {
            border: none;
            margin-left: 10px;
        }

        #hot_news {
            display: inline-block;
            height: 80px;
            width: 250px;
            margin-left: 10px;
        }

        #icon16 {
            background: url("imges/icon16.png") no-repeat;
        }

        #icon17 {
            background: url("imges/icon17.png") no-repeat;
        }

        #icon18 {
            background: url("imges/icon18.png") no-repeat;
        }

        #icon19 {
            background: url("imges/icon19.png") no-repeat;
        }

        #icon20 {
            background: url("imges/icon20.png") no-repeat;
        }

        #icon21 {
            background: url("imges/icon21.png") no-repeat;
        }

        #icon22 {
            background: url("imges/icon22.png") no-repeat;
        }

        #icon23 {
            background: url("imges/icon23.png") no-repeat;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main">
    <img src="imges/icon14.png" alt="">
    <h1>性格</h1>
    <!--栏目项，注意宽度的问题-->
    <div class="column">
        <a class="menu menu_margin menu_magrin_left" href="#">开朗</a>
        <a class="menu menu_margin" href="#">善良</a>
        <a class="menu menu_margin" href="#">外向</a>
        <a class="menu menu_margin" href="#">活泼</a>
    </div>
    <div class="column">
        <a class="menu menu_margin menu_magrin_left" href="#">机敏</a>
        <a class="menu menu_margin" href="#">深沉</a>
        <a class="menu menu_margin" href="#">轻浮</a>
        <a class="menu menu_margin" href="#">冲动</a>
    </div>
    <div class="column">
        <a class="menu menu_margin menu_magrin_left" href="#">依赖</a>
        <a class="menu menu_margin" href="#">自负</a>
        <a class="menu menu_margin" href="#">迟钝</a>
        <a class="menu menu_margin" href="#">善交际</a>
    </div>
    <div class="column">
        <a class="menu menu_margin menu_magrin_left" href="#">聆听者</a>
        <a class="menu menu_margin" href="#">完美主义</a>
        <a class="menu menu_margin" href="#">见异思迁</a>
        <a class="menu menu_margin" href="#">一丝不苟</a>
    </div>
    <div class="column">
        <a class="menu menu_margin menu_magrin_left" href="#">羞涩</a>
        <a class="menu menu_margin" href="#">悲观</a>
        <a class="menu menu_margin" href="#">神经质</a>
        <a class="menu menu_margin" href="#">不拘小节</a>
    </div>
    <!--图片和新闻-->
    <div class="column" style="padding-top: 6px">
        <a id="hot_img" href="#"><img src="imges/icon15.png" alt=""></a>
        <div id="hot_news">
            <!--TODO H2标签的上边应该离column div为6，但是设置有问题，还没有处理-->
            <h2>十二星座遇到真爱时的反应</h2>
            <p>面对爱情有些人选择了将就，有的选择了等待，等待真正的爱情降临，那么怎么判断真正的爱情是不是到来了呢？</p>
        </div>
    </div>
    <!--热点列表-->
    <div class="column">
        <ul>
            <li id="icon16">感情中无法自拔的星座</li>
            <li id="icon17">善于玩弄男人的星座女</li>
            <li id="icon18">12星座对你动心的细节</li>
            <li id="icon19">只对你一心一意的星座</li>
            <li id="icon20">最在意女友前任的星座</li>
            <li id="icon21">爱情自我为中心的星座</li>
            <li id="icon22">哪个星座女分手最果断</li>
            <li id="icon23">这些星座CP适合姐弟恋</li>
        </ul>
    </div>

</div>
</body>
</html>